<!-- 活动安排 -->
<template>
    <div class="content">
        <!-- 顶部按钮 -->
        <div class="btns">
            <!-- 左边筛选按钮 -->
            <div class="filtrate">
                <el-button type="primary" icon="Search" @click="getActivityByStatus('待审核')">审核中</el-button>
                <el-button type="primary" icon="Discount" @click="getActivityByStatus('已通过')">已通过</el-button>
                <el-button type="primary" icon="Delete" @click="getActivityByStatus('已驳回')">已驳回</el-button>
            </div>
            <!-- 右边操作按钮 -->
            <div class="opration">
                <el-button type="primary" icon="Plus" @click="addActivityDialog = true">发起活动</el-button>
                <el-button type="primary" icon="MessageBox" @click="activityArrangementBtn">活动审核</el-button>
            </div>
        </div>
        <!-- 表格 -->
        <div class="tableContent">
            <el-card style="max-width: 88vw">
                <template #header>
                    <div class="card-header">
                        <span>活动安排</span>
                    </div>
                </template>
                <!-- 表格主体 -->
                <div class="table">
                    <el-table :data="tableData" style="width: 100%" height="75vh">
                        <el-table-column fixed prop="date" label="活动日期" width="150" />
                        <el-table-column prop="name" label="活动名称" width="120" />
                        <el-table-column prop="content" label="活动内容" width="120" show-overflow-tooltip="true" />
                        <el-table-column prop="capacity" label="活动人数" width="120" />
                        <el-table-column prop="address" label="活动地点" width="600" />status
                        <el-table-column prop="status" label="活动状态" fixed="right" width="120">
                            <template #default="{ row }">
                                <el-tag :type="getStatusType(row.status)">
                                    {{ formatStatus(row.status) }}
                                </el-tag>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>
            </el-card>
        </div>
        <!-- 发起活动组件 -->
        <div class="addActivity">
            <el-dialog v-model="addActivityDialog" title="发起活动" width="500px">
                <div class="addActivityContent">
                    <div class="name">
                        <span>活动名称：</span>
                        <el-input v-model="addActivity.name" placeholder="请输入活动名称" style="width: 200px;" />
                    </div>
                    <div class="time">
                        <span>活动时间：</span>
                        <el-date-picker v-model="addActivity.activityDate" placeholder="请选择时间" type="datetime"
                            format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm" style="width: 300px;" />
                    </div>
                    <div class="content">
                        <span>活动内容：</span>
                        <el-input v-model="addActivity.content" type="textarea" placeholder="请输入活动内容"
                            style="width: 300px;" />
                    </div>
                    <div class="capacity">
                        <span>活动人数：</span>
                        <el-input v-model="addActivity.participants" placeholder="请输入活动人数" style="width: 200px;" />
                    </div>
                    <div class="address">
                        <span>活动地点：</span>
                        <el-input v-model="addActivity.location" placeholder="请输入活动地点" style="width: 200px;" />
                    </div>
                </div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="addActivityDialog = false">取消</el-button>
                        <el-button type="primary" @click="submitAddActivity">
                            发布审核
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
        <!-- 活动审核弹窗 -->
        <div class="activityArrangement">
            <el-dialog title="活动审核" v-model="activityArrangementDialog" width="70%">
                <template #default>
                    <el-table :data="arrangementActivity" style="width: 100%" height="60vh">
                        <el-table-column fixed prop="activityDate" label="活动日期" width="120" />
                        <el-table-column prop="name" label="活动名称" width="120" />
                        <el-table-column prop="content" label="活动内容" width="120" />
                        <el-table-column prop="participants" label="活动人数" width="120" />
                        <el-table-column prop="location" label="活动地点" width="120" />
                        <el-table-column prop="status" label="状态" width="120" />
                        <el-table-column fixed="right" label="可操作" min-width="240">
                            <template #default="{ row }">
                                <el-button type="primary" size="small" @click="
                                    currentActivityId = row.activityId;
                                rejectionDialog = true;
                                ">
                                    驳回审核
                                </el-button>
                                <el-button type="success" size="small" @click="passVerification(row.activityId)">
                                    通过审核
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="activityArrangementDialog = false">取消</el-button>
                        <el-button type="primary" @click="activityArrangementDialog = false">确定</el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
        <!-- 驳回审核弹窗 -->
        <div class="rejection">
            <el-dialog title="驳回审核" v-model="rejectionDialog" width="30%">
                <span>理由：</span>
                <el-input v-model="rejectionReason" placeholder="请输入驳回理由" type="textarea" :rows="4"></el-input>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="rejectionDialog = false">取消</el-button>
                        <el-button type="primary" @click="confirmReject" :disabled="!rejectionReason">
                            确定
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { ActivityFormData } from '@/API/interface/activityArrangement'
import { ActivityStatus, addActivityApi, getAllActivityApi, passActivityStatus,rejectActivityStatus,getActivityByStatusApi } from '@/API/interface/activityArrangement'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
const addActivityDialog = ref(false)  // 发起活动组件控制开关
const activityArrangementDialog = ref(false)  // 活动审核组件控制开关
const rejectionDialog = ref(false)  // 驳回活动组件控制开关
const tableData = ref([{
}])
const currentActivityId = ref<number>(0)  // 当前活动id
const rejectionReason = ref<string>('')  // 驳回理由
// 状态类型映射
const statusMap = {
    待审核: '审核中',
    已通过: '已通过',
    已驳回: '已驳回'
}
// 状态标签类型
const getStatusType = (status: string) => {
    const types = {
        待审核: 'warning',
        已通过: 'success',
        已驳回: 'danger'
    }
    return types[status as keyof typeof types] || ''
}

// 格式化状态显示
const formatStatus = (status: string) => {
    return statusMap[status as keyof typeof statusMap] || '未知状态'
}
// 初始化获取数据
onMounted(() => {
    getAllActivityApi().then(res => {
        if (res.data.code === 200) {
            tableData.value = res.data.data.map((item: ActivityFormData) => ({
                date: dayjs(item.activityDate).format('YYYY-MM-DD HH:mm'),
                name: item.name,
                content: item.content,
                capacity: item.participants,
                address: item.location,
                status: item.status
            }))
        }
    }).catch(error => {
        console.error('获取活动列表失败:', error)
    })
})
//活动列表内容
const addActivity = ref<ActivityFormData>({
    name: '',
    activityDate: new Date(),
    content: '',
    participants: 0,
    location: '',
    status: ActivityStatus.planning,
})
// 提交发起活动
const submitAddActivity = async () => {
    const res = await addActivityApi(addActivity.value)
    console.log('添加活动结果返回', res);
    // 清空表单
    addActivity.value = {
        name: '',
        activityDate: new Date(),
        content: '',
        participants: 0,
        location: '',
        status: ActivityStatus.planning,
    }
    addActivityDialog.value = false
}
//打开活动审核
const activityArrangementBtn = async () => {
    activityArrangementDialog.value = true;
    const res = await getAllActivityApi();
    console.log(res.data.data);
    // 数组赋值给arrangementActivity数组
    arrangementActivity.value = res.data.data;
    // console.log(arrangementActivity.value);

}
//活动审核表单内容
const arrangementActivity = ref<ActivityFormData[]>([{
    activityId: 0,
    name: '',
    activityDate: '',
    content: '',
    participants: 0,
    location: '',
    status: ActivityStatus.planning,
    rejectReason: ''
}])
//确定驳回审核
const confirmReject = async () => {
    try {
        console.log('activeId', currentActivityId.value);

        const res = await rejectActivityStatus({
            activityId: currentActivityId.value,
            status: ActivityStatus.rejected,
            rejectReason: rejectionReason.value
        })
        if (res.data.code === 200) {
            ElMessage.success('已驳回！')
            // 刷新活动列表
            getAllActivityApi()
        }else{
            ElMessage.error('驳回失败！')
        }
        rejectionDialog.value = false
        activityArrangementDialog.value = false
    } catch (error) {
        ElMessage.error('驳回失败')
        rejectionDialog.value = false
        activityArrangementDialog.value = false
    }
}
//审核通过
const passVerification = async (activityId: number) => {
    try {
        console.log('activeId', activityId);
        const res = await passActivityStatus({
            activityId,
            status: ActivityStatus.ongoing
        })
        if (res.data.code === 200) {
            ElMessage.success('审核通过')
            getAllActivityApi();
        }
    } catch (error) {
        ElMessage.error('操作失败')
    }
}
// 根据状态筛选活动
const getActivityByStatus = async (statusValue:String) => {
    const res = await getActivityByStatusApi({
        status: statusValue
    })
    // 赋值给tableData
    tableData.value = res.data.data
}
</script>

<style lang="less" scoped>
.content {
    .btns {
        display: flex;
        justify-content: space-between;
        margin: 1vh 1vw;
    }

    .tableContent {

        .card-header {
            font-size: 2.5vh;
            color: #409eff;
            font-weight: 600;
        }
    }

    .el-card /deep/ * {
        padding: 0.5vh;
    }

    .addActivity {
        .addActivityContent {
            display: flex;
            flex-direction: column;

            * {
                margin-top: 0.6vh;
            }
        }
    }
}
</style>